<template>
  <div class="page-container">
    <div class="page-content">
      <div class="container" style="flex-grow: 1;">
          <basic-card :title='$t("device.devicesDocs")' :icon-class="'el-icon-eleme'">
          <basic-table :pageMethod="$mainApi.devicesDocsApi.getDevicesDocsByPage" :tableForm="tableForm">
        <template #table-top="basicTable">
          <el-form ref="form" :inline="true" size="small"  class="text-right">
            <el-form-item>
              <el-input v-model="tableForm.search" @change="basicTable.table.refresh"></el-input>
            </el-form-item>
            <el-form-item>
                  <el-button type="primary" @click="basicTable.table.refresh">{{$t('botton.search')}}</el-button>
                  <el-button type="success" @click="showDevicesDocsFormDialop(null, {})">{{$t('botton.create')}}</el-button>
             <el-button
                    type="danger"
                    @click="showDeleteDialop(basicTable.table.selectRows)"
                    :disabled="basicTable.table.selectRows.length < 1"
                  >{{$t('botton.batch_delete')}}</el-button>
            </el-form-item>
          </el-form>
        </template>
         <template #table-column>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="deviceModelId" :label="$t('device.device_model')">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="showDevicesDocsFormDialop(scope.row.id, scope.row)"
              >{{ scope.row.device_model_id }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="instructionManualFile" :label="$t('device.instruction_manual_file')"></el-table-column>
          <el-table-column prop="instructionManual" :label="$t('device.instruction_manual')"></el-table-column>
          <el-table-column prop="maintenanceManualFile" :label="$t('device.maintenance_manual_file')"></el-table-column>
          <el-table-column prop="maintenanceManual" :label="$t('device.maintenance_manual')"></el-table-column>
          <el-table-column prop="emergencyTreatmentFile" :label="$t('device.emergency_treatment_file')"></el-table-column>
          <el-table-column prop="emergencyTreatment" :label="$t('device.emergency_treatment')"></el-table-column>
          <!-- <el-table-column prop="goodsDescribe" :label="$t('commodity.description')"></el-table-column> -->
      </template>
      
        <template #others-elements="basicTable">
        <devicesDocs-form-dialop ref="DevicesDocsFormDialop" @success="basicTable.table.refresh" />
        <basic-delete-dialop ref="DeleteDialop" @confirm="(list) => deleteData(list, basicTable.table.refresh)" />

          </template>
          </basic-table>
        </basic-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import DevicesDocsFormDialop from "./components/devicesDocsFormDialop.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
export default Vue.extend({
  components: { DevicesDocsFormDialop, BasicDeleteDialop , BasicTable, BasicCard},
 data() {
    return {
      tableForm: {
        search: ""
      }
    }
  },
 
  methods: {
    goBack() {
      this.$router.back();
    },
    showDevicesDocsFormDialop(id: any, formData: any) {
      (this.$refs.DevicesDocsFormDialop as any).init(id, formData);
    },
     showDeleteDialop(selectRows: Array<any>) {
      if (selectRows.length < 1) {
        this.$message.warning("请选择一个文档");
      }
      const deleteList: Array<any> = [];
      selectRows.forEach((selected: any) => {
        deleteList.push({
          id: selected.id,
          label: selected.title
        });
      });
      (this.$refs.DeleteDialop as any).init(deleteList);
    },
    
    deleteData(list: Array<any>, refresh: Function) {
      const allPromise: Array<any> = [];

      list.forEach((item) => {
        allPromise.push(this.$mainApi.devicesDocsApi.deleteDevicesDocsById(item.id));
      });

      Promise.all(allPromise).then(() => {
        refresh();
      });
    }
   
  }
})
</script>

<style>

</style>